<template>
	<canvas canvas-id="sparycancas" id="sparycancas" class="canvas"></canvas>
</template>

<script>
	var octx;
	var bubbleList = [];
	export default {
		data() {
			return {

			}
		},
		props: {},
		created() {},
		mounted: () => {
			octx = uni.createCanvasContext('sparycancas', this);
			// octx.setFillStyle(`rgba(0,0,0,0.1)`)
			
			var canvasWidth = '';
			var canvasHeight = '';
			const query = uni.createSelectorQuery();
			//获取宽度
			query.select('#sparycancas').fields({
				size: true
			}, (res) => {
				canvasWidth = res.width;
				canvasHeight = res.height;
			}).exec();
			let gridSize = 10;
			let colSize = 20
			let cols = Math.floor(canvasWidth / gridSize);
			let row = 10;
			let yArr = Array(cols).fill(canvasHeight);

			setInterval(() => {
				octx.shadowColor = '#5b5b5b';
				octx.shadowBlur = 20;
				octx.shadowOffsetY = 30;
				// octx.setFillStyle(`rgba(0,0,0,0.2)`)
				// octx.fillRect(0,0,canvasWidth,canvasHeight);
				uni.canvasToTempFilePath({
					x:0,
					y:0,
					width:canvasWidth,
					height:canvasHeight,
					destWidth:canvasWidth,
					destHeight:canvasHeight,
					canvasId:'sparycancas',
					success: (res) => {
						uni.canvasGetImageData({
							canvasId: 'sparycancas',
							  x: 0,
							  y: 0,
							  width: canvasWidth,
							  success: res =>{
								  uni.canvasPutImageData({
								  	canvasId: 'sparycancas',
								  	  x: 0,
								  	  y: 0,
								  	  width: canvasWidth,
								  	  data: res.data,
								  },this)
							  }
						},this)
						
					}
				},this)
				octx.setFillStyle("#0f0");
				yArr.forEach((item,index) =>{
					octx.drawImage("/static/1.png", 0, 0, 16, 16, gridSize * index, item, 16, 16);
					yArr[index] = Math.random() < 0.03 ? canvasHeight : item - 10;
				})
				octx.draw();
			}, 100);
		}, 
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.canvas {
		width: 200px;
		height: inherit;
		background-color: rgba(0,0,0,0.1);
	}
</style>